<template>
	<view class="">
		<view class="nav_top-bg">
			<u-navbar title="我的账单">
				<view class="u-nav-slot" slot="left">
					<u-icon name="arrow-left" @click="go_black" size="19"></u-icon>
					<u-line direction="column" :hairline="false" length="16" margin="0 10px"></u-line>
					<u-icon name="home" @click="goHome" size="20"></u-icon>
				</view>
			</u-navbar>
		</view>
		<view class="" v-if="!zhangdanLists.length">
			<u-empty>
			</u-empty>
		</view>
		<!-- 收入明细 -->
		<view class="shouru" v-else>
			<view class="w-690">
				<view class="zd-list d-flex align-items justify-content-space-between"
					v-for="(zhangdan,index) in zhangdanLists" :key="index">
					<view class="">
						<view class="sr-t">{{zhangdan.type_text}}</view>
						<view class="sr-time">{{zhangdan.paytime_text}}</view>
					</view>
					<view class="sr-num">{{zhangdan.price}}元</view>
				</view>
			</view>
		</view>
		
		
	</view>
</template>

<script>
	import {
		getorderlist
	} from '@/api/user.js'
	export default {
		data() {
			return {
				zhangdanLists: [],
				cur_page: '',
				last_page: '',
			}
		},
		onLoad() {
			this.get_zhangdan()
		},
		// 用户下拉加载
		onPullDownRefresh() {
			if (this.cur_page == 1) {
				this.get_zhangdan()
			}
		},
		// 上拉触底加载
		onReachBottom() {
			if (this.cur_page < this.last_page) {
				this.cur_page++
				this.get_zhangdan()
			}
		},
		methods: {
			go_black() {
				uni.navigateBack({
					delta: 1
				})
			},
			goHome() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},

			// 获取账单列表
			get_zhangdan() {
				getorderlist({}).then(res => {
					console.log("获取账单列表", res);
					if (res.code == 1) {
						this.cur_page = res.data.orderlist.current_page
						this.last_page = res.data.orderlist.last_page
						if (this.cur_page == 1) {
							this.zhangdanLists = res.data.orderlist.data
						} else {
							this.zhangdanLists = this.zhangdanLists.concat(res.data.orderlist.data)
						}
						uni.stopPullDownRefresh()
					}
				})
			},
		}
	}
</script>

<style>
	.zd-list {
		height: 120rpx;
	}

	.sr-num {
		font-size: 30rpx;
		font-weight: normal;
		line-height: 42rpx;
		color: #FF6400;
	}

	.sr-time {
		font-size: 24rpx;
		font-weight: normal;
		line-height: 45rpx;
		color: #999999;
	}

	.sr-t {
		font-size: 30rpx;
		font-weight: normal;
		line-height: 42rpx;
		color: #333333;
	}

	.shouru {
		width: 750rpx;
		background-color: #fff;
		margin: 20rpx auto;
		padding: 20rpx 0;
	}

	page {
		background-color: #F7F8FB;
	}
</style>